@media all {/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0pr2
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
/* fonts */
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}}
@media all {/* **************** GRIDS ***************** */
.line, .lastUnit {overflow: hidden;_overflow:visible;_zoom:1; }
.unit{float:left;_zoom:1;}
.unitExt{float:right;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.size1of8 { width: 12.5%; }
.size3of8 { width: 37.5%; }
.size5of8 { width: 62.5%; }
.size7of8 { width: 87.5%; }
.size1of10 { width: 10%; }
.size3of10 { width: 30%; }
.size7of10 { width: 70%; }
.size9of10 { width: 90%; }

.lastUnit {float:none;_position:relative; _left:-3px; _margin-right: -3px;width:auto;}
/* extending grids to allow a unit that takes the width of its content */
.media{width:auto;}
}
@media all {/* **************** TEMPLATE ***************** */
/* ====== Page Head, Body, and Foot ====== */
body{_text-align:center;}/* IE5.5 */
.body{overflow:hidden; _overflow:visible; _zoom:1;}
.page{margin: 0 auto 20px; width: 950px;_text-align:left;} /* wraps other template elems to set width */ /* text-align IE5.5 */
.janji{width:860px;}

/* ====== Columns ====== */
.main{overflow: hidden;_overflow:visible;_zoom:1;}
.leftCol{float:left; width:250px;_margin-right:-3px;}
.rightCol{float:right; width: 300px;_margin-left:-3px;}

/* extend columns to allow for common column widths */
.gMail{width:160px;}
.myYahoo{width:300px;}

.foot { margin-top: 20px; position: relative; border-top: 1px solid #ddd; }

.clear { clear: both; }
.main { position: relative; }
}
@media all {body{margin:0; font-family:"Myriad Pro","Segoe UI",Helvetica, Arial, sans-serif; color: #444; }
/* **************** CONTENT OBJECTS ***************** */
/* ====== Default spacing ====== */
h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote {padding:5px;}
p { padding: 5px;}
h1, h2, h3, h4, h5, h6 {padding-bottom:2px;}
pre{margin: 10px;}
table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl,
ul h1,ul h2,ul h3, ul h4, ul h5, ul h6, ul p, ul ul, ul ol, ul dl,
ol h1,ol h2,ol h3, ol h4, ol h5, ol h6, ol p, ol ul, ol ol, ol dl {padding:0;}
/* ====== Elements ====== */
em{font-style: italic;}
strong{font-weight:bold;}
hr{border: 5px solid #e2e2e2; border-width: 0 0 5px 0; margin: 20px 10px 10px 10px;}
code{color:#0B8C8F;}
/* ====== Headings ====== */
h1, .h1{font-size:196%;  font-weight:normal; font-style: normal; color:#FF9900;}
h2, .h2{font-size:167%; font-weight:normal; font-style: normal; color:#FF9900;}
h3, .h3{font-size:146.5%; font-weight:normal; font-style: normal; color:#FF9900;}
h4, .h4{font-size:123.1%; font-weight:normal; font-style: normal; color: #FF9900;}
h5, .h5{font-size:108%; font-weight:bold; font-style: normal; color:#FF9900;}
h6, .h6{font-size:108%; font-weight:normal;  font-style: italic; color:#FF9900;}
/* if additional headings are needed they should be created via additional classes, never via location dependant styling */
.category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}
.category a{color: #333;}
.important a{font-weight:bold;}
/* links */
a { color: #036; text-decoration: none }
a:focus, a:hover { text-decoration: underline }
/* ====== Lists ======*/
/* numbered list */
ol.simpleList li{list-style-type: decimal; margin-left:40px;}
/* standard list */
ul.simpleList li{list-style-type:disc; margin-left:40px;}
/* ====== Tables ====== */
.data{padding: 20px; position:relative; zoom:1;vertical-align: top;border-right:solid 1px transparent;/* border fixes a FF2 bug which causes the data table to overlay its borders*/}
.data table {width:100%;border:1px solid #AE0345;}
th, td{vertical-align:top;border:1px solid #AE0345;}
.txtC, .data .txtC td, .data .txtC th{text-align:center;}
.txtL, .data .txtL td, .data .txtL th{text-align:left;}
.txtR, .data .txtR td, .data .txtR th{text-align:right;}
.txtT, .data .txtT td, .data .txtT th{vertical-align:top;}
.txtB, .data .txtB td, .data .txtB th{vertical-align:bottom;}
.txtM, .data .txtM td, .data .txtM th{vertical-align:middle;}
.data th,.data td{padding:3px 20px}
.data thead tr{background-color: #fff0f8;}
.data th{color: #000; font-weight:bold}
/* specification table - extends data table */
.spec{padding:10px;}
.spec table{border-top: 1px solid #e2e2e2; border-bottom-color:#fff; border-left:none; border-right:none;}
.spec th, .spec td{border:1px solid #e2e2e2; border-width: 1px 0; padding-left:0;}
.spec .odd, .spec .even{background-color: #fff;}
/* ====== blockquote ====== */
cite{display:block; text-align:right; padding-top: 10px;}
/* ====== callout ====== */
.callout{font-size:189%;color:#999999; font-style:italic;}
.callout cite{display:block; text-align:right;padding-top: 30px; font-size:69.25%;}
.callout span.quot{font-size: 500%; vertical-align: sub; color:#e2e2e2; line-height:25px; font-weight:bold;}
.callout span.quotLast{vertical-align:middle;}
/* ====== image treatments (get more from jason santa maria) ====== */
.caption{font-size:13px; color:#666666; font-style:italic;padding-top:0;}

/* font style */
.subdued { color: #aaa; }
.normal { font-weight: normal; text-transform: none; }
.small { font-size: small; }
.nobreak { white-space:nowrap; }

input, select, button, textarea {border:1px solid #999999;font-size:100%;}
input {margin:5px 0;padding:3px; color: #444; }

.footLinks li { display: inline; margin: 1px 5px 1px 0; }
.head .logo {  width: 35%; float: left; }
.head .menuWrapper { width: auto; }
#nicemenu { margin:0 auto; padding-top:25px;}
#nicemenu ul, #nicemenu li{margin:0; border:0; list-style:none; padding:0;}
#nicemenu ul{height:21px; z-index:9999;}
#nicemenu a { color:#fff; text-decoration:none; }
#nicemenu a:hover { text-decoration:underline; }
#nicemenu li { display:inline; position:relative; z-index:9999;}
#nicemenu li span { background: #777; position:relative;  padding:4px 4px 4px 6px;  border-bottom:none; line-height:18px; }
#nicemenu li span a { font-weight:bold; padding:0 6px 0px 2px;  }
#nicemenu li span.over { background: #FF9900; }
*+html #nicemenu li span.over { } /* IE6 */
#nicemenu li span.over a { }
#nicemenu li span.over a:hover { text-decoration:none; }
/* #nicemenu li span.active { padding:4px 3px 4px 5px; border-top:solid 1px #E5E5E5; border-left:solid 1px #E5E5E5;  border-right:solid 1px #999999; border-bottom:solid 1px #fff;  } */
*+html #nicemenu li span.active {  border-top:solid 2px #E5E5E5; padding-bottom:3px; }
#nicemenu li span.active a { }
#nicemenu li span.active a:hover { text-decoration:none; }
#nicemenu img.arrow { /*margin-left:4px;*/ cursor:pointer; }
#nicemenu div.sub_menu { display:none; position:absolute; left:0; top:0px; margin-top:18px;  padding:4px; top:1px; width:160px; background:#777; border:solid 1px #999; } /* border-left:solid 1px #E5E5E5; border-right:solid 1px #999999; border-bottom:solid 1px #999999;} */
* html #nicemenu div.sub_menu { margin-top:23px; } /* IE6 */
*+html #nicemenu div.sub_menu { margin-top:23px; } /* IE7 */
#nicemenu div.sub_menu a:link,
#nicemenu div.sub_menu a:visited,
#nicemenu div.sub_menu a:hover{ display:block; font-size:11px; padding:4px;}
#nicemenu a.item_line { border-top:solid 1px #999; padding-top:6px !important; margin-top:3px; }

.midAlign { text-align: center; }

.head { padding:0px; border-bottom: 1px solid #E5E5E5; }
.logotxt { font-size: 40px; font-weight: 900; color: #2B60AE; }
.logotxt span { color: #7EA6E1; }
.logotxt .dotcom { color: #ddd; font-weight: normal;}

.bullet { margin: 10px 6px 6px 10px; padding: 0;}
.bullet li { list-style-type:disc; line-height: 18px;margin-left: 1em;}
.latestStatements .line { margin-bottom: 5px;}
.mod .latestHilite { margin: 5px; }
.mod .latestHilite .hd { border-color: #dad79a; }

p.author img { border: 4px solid #eee; }
.bodyText { margin-right: 20px; font-size: 110%; line-height: 1.5em; font-familyX: "Bitstream Charter", Georgia, serif; }
.bodyText .quote { position: absolute; left: 0; margin: 5px 10px 10px 0; width: 120px; background: #EBF7C1; font-size: 110%; font-style: italic;
    border: 3px solid #BCD26D;border-width: 3px 0 3px 0;
}
.bodyText hr { margin: 5px 5px 10px; }
.textMeta { color: #999; }
.textMeta span { color: #333; }


.photoBox { padding-top: 7px; }
.paging { text-align: center; font-size: 140%;  margin-top: 20px; }
.paging span { padding: 5px; border: 1px solid #eee; display: block; float: left; margin-right: 10px; }

.searchBox { padding: 5px; }

.contactForm label { display: block; clear: both; }
}
@media all {/*
Copyright (c) 2009, Nicole Sullivan. All rights reserved.
Code licensed under the BSD License:
version: 0.2
*/
/* **************** BLOCK STRUCTURES ***************** */
/* mod */
.mod{margin:10px;}
.hd,.bd,.ft,{overflow:hidden;_overflow:visible; _zoom:1;}
.hd, .inner{position:relative;}
.mod .hd { clear: both; }
.mod .hd .hd-main { display: inline; }
.mod .hd .hd-more { float: right; display: inline; margin-top: .5em;}
b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}
.tl, .tr, .bl, .br{height:10px; width:10px;float:left;}
.tl{background-position: left top;}
.tr{background-position: right top;}
.bl{background-position: left bottom;} 
.br{background-position: right bottom;}
.br,.tr{float:right;}
.bl,.br{margin-top:-10px;}
.top{background-position:center top;}
.bottom{background-position:center bottom;_zoom:1;}/* this zoom required for IE5.5 only*/
/* complex */
.complex{overflow:hidden;*position:relative;*zoom:1;}/* position/zoom required for IE7, 6, 5.5 */
.complex .tl, .complex .tr{height:32000px; margin-bottom:-32000px;width:10px;overflow:hidden;}
.complex .bl, .complex .br{/*margin-top:0;*/}
.complex .top{height:5px;}
.complex .bottom{height:5px;/*margin-top:-10px;*/}
/* pop  */
.pop{overflow:visible;margin: 10px 20px 20px 10px; background-position:left top;}
.pop .inner{right:-10px; bottom:-10px; background-position:right bottom;padding:0 10px 10px 0;}
.pop .tl, .pop .br{display:none;}
.pop .bl{bottom:-10px;}
.pop .tr{right:-10px;}}
@media all {.mod .hd {
    border-bottom: 1px solid #eee; margin-bottom: 5px;
    clear:both;
    position:relative;
}
.hilite { margin: 0; border: 1px solid #DAD79A; }
.hilite .inner { background: #FFFDCC; }

.bghilite { background: #E0FCFF;}
.bghilite2 { background: #DAD79A;}

.announcement .inner { background: #FFFDA9; padding: 5px; }
.announcement .hd { border-color: #FFcd80; }

.reference { margin: 0; border: 1px solid #B2E3E1; }
.reference .inner { background: #E7FFFE; padding: 5px;}
.reference .hd { border-color: #B2E3E1; }
.reference .hd h2 { color: #68C3C0; }

.red .inner {background-color:#c01c41; color:#fff;}
.red .hd { border: none; }
.red * { color:#fff;}

.grey { border: 1px solid #ddd; }
.grey .inner { background: #efefef; }
.boxed { border: 1px solid green; }

	/* my own add on*/

#map_canvas {
    position: fixed;
    width: 100%;
    height: 450px;
    float : left;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}
	
#control_panel {
    position: fixed;
    top: 480px;
    left: 10px;
    right: 0;
    bottom: 0;
    overflow: auto;
}
#button_panel {
	position: fixed;
    top: 490;
    left: 50%;
    right: 0;
    bottom: 0;
    overflow: auto;
}
	
#col1 {
  float: left;
  width: 20%;
}
#col2 {
  float: left;
  width: 20%;
}	
#col3 {
  float: left;
  width: 20%;
}	
#col4 {
  float: left;
  width: 20%;
}	
#col5 {
  float: right;
  width: 20%;
}
	
.context  {
color:#4444FF;
font-family:Arial,sans-serif;
font-size:small;
text-decoration:none;
}	
	
	
	
}